<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta author="zrong.me 曾荣">
	<title>登录 - 最家家居 - Z.BEST</title>
	<link rel="stylesheet" type="text/css" href="/static/style/register-login.css">
    <script src="/static/gt.js"></script>
    <script src="/static/jquery-1.12.3.min.js"></script>
    <style>
        body {
            margin: 50px 0;
            text-align: center;
        }
        .inp {
            border: 1px solid gray;
            padding: 0 10px;
            width: 200px;
            height: 30px;
            font-size: 18px;
        }

        #embed-captcha {
            width: 300px;
            margin: 0 auto;
        }
        .show {
            display: block;
        }

        #notice {
            color: red;
        }
        .butt{
			width: 100%;
			background: #eb2636;
    		box-shadow: none;
    		border: 0;
    		border-radius: 3px;
    		line-height: 41px;
    		color: #fff;
    		display: block;
    		font-size: 15px;
    		cursor: pointer;
    		font-family: 'Microsoft Yahei';
		}
		.butt:hover{
			background: #eb2636;
		}
    </style>
</head>
<body>
<div id="box"></div>
<div class="cent-box">
	<div class="cent-box-header">
		<h1 class="main-title hide">最家家居</h1>
		<h2 class="sub-title">一切随心，有心去感悟空间</h2>
	</div>

	<div class="cont-main clearfix">
		<div class="index-tab">
			<div class="index-slide-nav">
				<a href="/login" class="active">登录</a>
				<a href="/reg">注册</a>
				<div class="slide-bar"></div>
			</div>
		</div>

        <form method="post" id="login-form" >
		<div class="login form">
			<div class="group">
				<div class="group-ipt email">
					<input type="tel" name="username" id="text" class="ipt" placeholder="手机号或邮箱" required>
				</div>
				<div class="group-ipt password">
					<input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码" required>
				</div>

			</div>
		</div>

            <div id="embed-captcha"></div>
        <p id="wait" class="show">正在加载验证码......</p>
        <p id="notice" class="hide">请先拖动验证码到相应位置</p>

		<div class="button">
			<button type="submit" class="butt" id="embed-submit">登录</button>
		</div>

		<div class="remember clearfix">
			<label class="remember-me"><span class="icon"><span class="zt"></span></span><input type="checkbox" name="remember-me" id="remember-me" class="remember-mecheck" checked>记住我</label>
			<label class="forgot-password">
{#				<a href="/modify_password">忘记密码？</a>#}
				<a href="#">忘记密码？</a>
			</label>
		</div>
    </form>
	</div>
</div>

<div class="footer">
	<p>最家家居 - Z.BEST -</p>
	<p>Designed By ZengRong & <a href="zrong.me">mycodes.net</a> 2019</p>
</div>
<script>
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);

        }
    });
</script>
<script src='/static/zhifou_js/background.js' type="text/javascript"></script>
<script src='/static/zhifou_js/jquery.min.js' type="text/javascript"></script>
<script src='/static/zhifou_js/layer/layer.js' type="text/javascript"></script>
<script src='/static/zhifou_js/index.js' type="text/javascript"></script>
{% if messages %}
    <script>
        {% for msg in messages %}
            alert('{{ msg.message }}');
        {% endfor %}
    </script>
{% endif %}
</body>
</html>